<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false"
    :before-close="handleClose">
    <div style="padding: 0 80px;">
      <!-- -----------------------------------------------------基本信息-------------------------------------------------------------- -->
      <el-divider>基本信息</el-divider>
      <div class="dialog_left children">
        <el-descriptions direction="vertical" :column="8" border>
          <el-descriptions-item label="申请时间">{{ ruleForm.applicationTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ ruleForm.applicantName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="申请类型">{{ ['维修', '保养', '其他'][ruleForm.type] }}</el-descriptions-item>
          <el-descriptions-item label="维修单">{{ ruleForm.pickNum || '-' }} </el-descriptions-item>
          <el-descriptions-item label="备注">{{ ruleForm.remark || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <el-divider>产品信息</el-divider>
      <div class="dialog_table">
        <el-table :data="purchaseEquipmentVos" border style="width: 100%">
          <el-table-column label="序号" width="100">
            <template slot-scope="scope">
              <div> {{ scope.$index + 1 }} </div>
            </template>
          </el-table-column>
          <el-table-column prop="consPriceAndAmountVo.materialNum" label="物料编号" />
          <el-table-column prop="consPriceAndAmountVo.materialName" label="物料名称" />
          <el-table-column prop="consPriceAndAmountVo.model" label="规格型号">
            <template slot-scope="{row}">
              <div> {{ row.consPriceAndAmountVo && row.consPriceAndAmountVo.model || '-' }} </div>
            </template>
          </el-table-column>
          <el-table-column prop="consPriceAndAmountVo.typeName" label="类别" />
          <el-table-column prop="storehouseName" label="所在仓库" />
          <el-table-column prop="amount" label="领用数量" />
          <el-table-column prop="consPriceAndAmountVo.unitName" label="单位" />
        </el-table>
      </div>
      <!-- ---------------------------------------------------相关附件-------------------------------------------------------- -->
      <el-divider>相关附件</el-divider>
      <el-link :disabled="!ruleForm.file" type="primary" :href="ruleForm.file" target="_blank">
        <i class="el-icon-document"></i>
        <span>下载附件{{ handleSubstring(ruleForm.file) }}</span>
      </el-link>
      <!-- --------------------------------------领料列表---------------------------------------------- -->
      <el-divider>领料列表</el-divider>
      <el-input type="textarea" v-model.trim="form.view" placeholder="请输入审核意见" rows="4" maxlength="50"
        show-word-limit />
      <div class="dialog-footer">
        <el-button type="primary" @click="handleConfirm(2)">通过</el-button>
        <el-button type="danger" @click="handleConfirm(3)">驳回</el-button>
      </div>
    </div>

  </el-dialog>
</template>

<script>
import { statusSort, listDetail } from '@/api/deviceConsumable/acquisitionapplication'
export default {
  name: 'Form',
  data () {
    return {
      dialogVisible: false,
      ruleForm: {},
      purchaseEquipmentVos: [],//领料列表
      isUpdateForm: false,
      dialogTitle: '审核',
      form: {
        auditId: null, //审核信息ID
        applicationId: null, //采购ID
        status: null, //状态（2已通过 3已驳回）
        view: "" //审核意见
      },
      /** 表单规则 --------------------------------------------------------------------------------------------------------------------- */
      rules: {
        typeName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      }
      /** ----------------------------------------------------------------------------------------------------------------------------- */
    }
  },
  computed: {
  },
  methods: {
    // 打开表单对话框
    openDialog (ids = null) {
      if (ids) {
        this.form.auditId = ids.auditId
        this.form.applicationId = ids.purchaseId
        listDetail(ids.purchaseId).then(({ data }) => {
          console.log(data);
          /** 修改时的表单参数赋值 --------------------------------------------------------------------------------------------------------------------- */
          this.ruleForm = data
          this.purchaseEquipmentVos = data.pickConsumableVos.map(item => {
            return {
              ...item,
              storehouseName: data.storehouseName
            }
          })
          this.dialogVisible = true
        })
      }
    },
    // 通过---- 驳回   ==>事件
    submitForm (type) {
      this.form.status = type
      statusSort(this.form).then(() => {
        this.$message({
          message: type == 2 ? '审核已通过' : '审核已驳回',
          type: type == 2 ? 'success' : 'error'
        })
        this.handleClose()
        this.$emit('submit_success')
      })
    },
    /** ---------------------------------------------------------------------------------------------------------------------------------------- */
    // 关闭窗口，重置表单-------------------
    handleClose () {
      this.form.view = ''
      this.dialogVisible = false
    },
    // 提交按钮----------------------------
    handleConfirm (type) {
      if (type == 3 && this.form.view == '') {
        this.$message({
          message: '审核驳回需填写审核意见',
          type: 'error'
        });
        return
      }
      this.submitForm(type)
    },
    // 附件数据重组
    handleSubstring (str) {
      if (str) {
        const index = str.lastIndexOf(".");
        str = str.substring(index + 1, str.length);
        return '.' + str
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.form {
  width: 70%;
  margin: 0 auto;
}

/* 基本信息文字居中 */
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;

  .dialog-footer-btn {
    width: 28%;
    display: flex;
    justify-content: space-around;

    .el-button {
      padding: 12px 45px;
    }
  }
}
</style>
